<template>
  <view class="feedback-list-container">
    <!-- 顶部栏：返回个人中心（图标+文字） + 居中标题 -->
    <view class="top-bar">
      <view class="back-to-personal" @click="gotoHomePage">
        <image
            class="back-icon"
            src="/static/icons/back.jpeg"
            mode="aspectFit"
        />
        <text class="back-text">返回首页</text>
      </view>
      <view class="page-title">反馈历史</view>
    </view>

    <!-- 空状态 -->
    <view v-if="feedbackList.length === 0" class="empty-state">
      <image src="/static/icons/empty_feedback.png" class="empty-icon" mode="widthFix" />
      <text class="empty-text">您还没有提交过反馈</text>
      <button class="empty-btn" @click="gotoNewFeedback">我要反馈</button>
    </view>

    <!-- 反馈列表 -->
    <view v-else class="feedback-list">
      <view class="feedback-item" v-for="feedback in feedbackList" :key="feedback.id">
        <view class="feedback-header">
          <text class="feedback-category">{{ feedback.category }}</text>
          <text class="feedback-status" :class="'status-' + feedback.status">
            {{ getStatusText(feedback.status) }}
          </text>
        </view>
        <view class="feedback-title">{{ feedback.title }}</view>
        <view class="feedback-content">{{ truncateContent(feedback.content) }}</view>
        <view class="feedback-footer">
          <text class="feedback-time">{{ formatTime(feedback.createTime) }}</text>

          <!-- 查看按钮 -->
          <button
              class="view-btn"
              size="mini"
              @click="gotoViewFeedback(feedback)"
          >
            查看
          </button>

          <!-- 编辑按钮（仅在可编辑时显示） -->
          <button
              class="edit-btn"
              size="mini"
              @click="gotoEditFeedback(feedback)"
              v-if="canEdit(feedback)"
          >
            编辑
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import request from '@/utils/request.js';

// 反馈列表响应式变量
const feedbackList = ref([]);

// 获取反馈列表（抽离为通用方法，避免重复代码）
const getFeedbackList = async () => {
  try {
    const res = await request.get('agent/feedback/myFeedback');
    // 业务状态码判断：仅code=200时处理列表数据
    if (res.code === 200) {
      feedbackList.value = res.data || [];
    } else {
      uni.showToast({ title: res.msg || '获取反馈列表失败', icon: 'none' });
      feedbackList.value = []; // 清空列表，显示空状态
    }
  } catch (error) {
    console.error('获取反馈列表失败:', error);
    uni.showToast({ title: '网络异常，请稍后再试', icon: 'none' });
    feedbackList.value = []; // 清空列表，显示空状态
  }
};

// 页面显示时获取反馈列表
onShow(async () => {
  await getFeedbackList();
});

// 内容截断（超过20字用...）
const truncateContent = (content) => {
  if (!content || typeof content !== 'string') return '';
  return content.length > 20 ? content.slice(0, 20) + '...' : content;
};

// 状态文本映射
const getStatusText = (statusCode) => {
  const statusMap = { 10: '未处理', 20: '处理中', 30: '已处理' };
  return statusMap[statusCode] || '未知状态';
};

// 编辑权限判断
const canEdit = (feedback) => {
  if (feedback.status !== 10) return false;
  const createTime = new Date(feedback.createTime);
  const now = new Date();
  // 仅允许24小时内未处理的反馈编辑
  return (now - createTime) / (1000 * 60 * 60) <= 24;
};

// 时间格式化
const formatTime = (timeStr) => {
  return new Date(timeStr).toLocaleString();
};

// 跳转到新建反馈
const gotoNewFeedback = () => {
  uni.navigateTo({ url: '/pages/feedback/index' });
};

// 跳转到查看反馈详情
const gotoViewFeedback = (feedback) => {
  uni.navigateTo({
    url: `/pages/feedback/index?feedbackId=${feedback.id}&mode=view`
  });
};

// 跳转到编辑反馈
const gotoEditFeedback = (feedback) => {
  uni.navigateTo({
    url: `/pages/feedback/index?feedbackId=${feedback.id}&mode=edit`
  });
};

// 跳转到个人中心
const gotoHomePage = () => {
  uni.navigateTo({ url: '/pages/home/index' });
};

// 监听刷新事件（从反馈提交页触发）
onMounted(() => {
  uni.$on('refreshFeedbackList', async () => {
    await getFeedbackList();
  });
});

// 组件销毁时取消监听，避免内存泄漏
onUnmounted(() => {
  uni.$off('refreshFeedbackList');
});
</script>

<style scoped>
/* 顶部栏：使用 space-between 分布元素，标题通过 flex-grow + 居中实现 */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.back-to-personal {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #409eff;
}

.back-icon {
  width: 24px;
  height: 24px;
  margin-right: 5px;
}

.back-text {
  font-size: 16px;
  font-weight: 500;
}

/* 标题居中：通过 flex-grow 占满中间空间 + text-align 居中 */
.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
  flex-grow: 1;
  margin: 0;
}

.feedback-list-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  color: #999;
}
.empty-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
}
.empty-text {
  font-size: 16px;
  margin-bottom: 20px;
}
.empty-btn {
  background-color: #409eff;
  color: #fff;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 16px;
  line-height: 1.5;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.feedback-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.feedback-category {
  font-weight: bold;
  color: #333;
  font-size: 15px;
}

.feedback-status {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
}
.status-10 {
  background-color: #fffbe6;
  color: #faad14;
}
.status-20 {
  background-color: #e6f7ff;
  color: #1890ff;
}
.status-30 {
  background-color: #f6ffed;
  color: #52c41a;
}

.feedback-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.feedback-content {
  margin-bottom: 12px;
  line-height: 1.6;
  color: #666;
  font-size: 14px;
}

.feedback-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 12px;
}

/* 查看按钮样式 */
.view-btn {
  background-color: #e6f7ff;
  color: #1890ff;
  border-color: #91d5ff;
  border-radius: 15px;
  padding: 2px 12px;
  font-size: 12px;
  line-height: 1.5;
  margin-right: 5px;
}

/* 编辑按钮样式 */
.edit-btn {
  background-color: #f0f9eb;
  color: #52c41a;
  border-color: #b7eb8f;
  border-radius: 15px;
  padding: 2px 12px;
  font-size: 12px;
  line-height: 1.5;
}
</style>